Creating stories.
Introduction / Background
Stories are stored within Supabase's database, which is in essence a Postgres database with additional bells and whistles.
You can edit the contents of the database tables using the backoffice's story editor. Stories are defined by
creating a new row in the stories table, and new stories should be added to the development environment, not directly to production as they need to be
tested prior to public release.
Entires in the stories table are downloaded from the database every time the user opens the story menu view
meaning any changes take effect immediately without any need to release a new version of the app. For this reason it is incredibly important not to touch the
production database without prior authorization.
What are stories?
Stories are one of the ways we introduce consonants and vowels in Mol an Óige. They consist of several different activity types which the user can progress though.
Currently there are the following stage or activity/slide types.
| stage name | description |
|---|---|
audio-slide | Shows a slide (image) and plays corresponding audio. |
instruction | Plays a pre-defined sound file which contains an instruction. e.g., "éist leis na focail seo". |
audio-button | Shows multiple buttons, asks user to press the buttons to hear sounds. Each button has a sound associated with its picture. |
audio-button-activity | Shows multiple buttons, and plays the sound of the button that should be clicked. The user should press the correct button to proceed to the next stage. |
audio-drag-activity | Shows multiple images, and plays the sound of the image that should be dragged into the box. The user should drag the correct image to proceed to the next stage. |
song | Shows a sound player with play/pause and repeat buttons. Plays the song from the beginning. When the song has finished playing unlocks the ability to proceed to the next stage. |
song-activity | Shows a sound player red dividers at which the song will pause. When the song pauses a screen opens prompting the user for voice input. If the input is correct the user proceeds to the next stage of the song if it is incorrect the user should repeat the section. |
For more details on these stages, please see the section: Stories Table.
Story assets
Currently, all the artwork we need for a minimum-viable product has been created. We have several consonants and vowels completed with their associated artwork and songs. You can find these assets in the MAO Assets folder owned by Emily Barnes.
Inside of the MAO Assets folder you will find a spreadsheet which shows the assets still to be written and those already recorded and in the folder. As well as that there is also subfolders full of the content itself, the images and audio per-letter.
Implementing stories.
In order to implement stories you need to create an entry in the backoffice for the story by hitting the "CREATE NEW STORU" button in the Story Editor
This will then generate an entry in the table with the next numerical ID and a common template for the story activities to make the story creation process a tad bit faster.
Click the EDIT button to open it up and get access to editing story information. You can also delete the story by pressing the DELETE button or change the position of the story in the application by shifting it up or down using the blue arrows. If the arrow is grayed out it means that you cannot move the story in that direction.
Editor Interface
Upon creating the story an empty story is made in the database. Once you access the story editor of your new story you will be presented with the following screen. This editor modifies the underlying Stories Table in supabase which already contains the automatically assigned story id.
Story details
The first three fields allow you to change the name, previous and description fields of the story in the database. When you edit the text the UPDATE button will change color to green. This color change indicates that the data shown in the form is different from the data that is currently stored in the database. If the UPDATE button is not green that means your changes are not saved. The UNDO button will simply revert to the text that is stored in the database and undo the changes you made to the input field.
Editing story details
The name field changes the display name of the story. This change is visible in the application.
The previous field indicates what story must be completed for this one to become available. For example, if we were editing story number 8, the previous would most likely be 7, unless we unlock multiple stories at story 6.
The description field is for humans to differentiate the stories, it should explain in simple terms what happens in the story, without spoilers as it will be displayed in the interface. Visible ot admin only
Stages
By default all the stages will be hidden. You can chose to show all stories by pressing the SHOW ALL button or viewing individual stories by pressing the pink button on each stage or the title itself.
Adding a new stage
To add a new stage you must scroll down to the bottom of the page where you will see these two buttons.
Press the SELECT NEW STAGE button and you will be prompted to chose from a menu of possible stages.
Upon selecting your desired stage and pressing the ADD STAGE button the stage will appear as the last stage. From there you can proceed in filling out information for each field.
Editing an existing stage
Editing the stage is simple. Just fill out the information the a given stage is asking for. If you're unsure what data you should insert refer to the Stories Table page where each stage structure is explained in detail.
Testing stories
In order to test stories in the development environment you need to first have your development environment setup, after that you can view stories as normal within the app.